import React from 'react';
import PropTypes from 'prop-types';
import { InfoCircleFilled } from '@ant-design/icons';
import { Typography, Radio, Tooltip } from 'antd';
import { formatCurrency } from '../../utlis/tools';
import './styles.less';

const { Title } = Typography;
// eslint-disable-next-line react/prop-types
const BlockITem = ({ title, value, action }) => {
  return (
    <div className="list_item">
      <div className="list_text_left">{title}</div>
      <div className="list_text">
        <div className="value">
          {action === 'link' ? (
            <a href="/123">{value}</a>
          ) : (
            <span copyable={action === 'copy'} ellipsis>
              {value}
            </span>
          )}
        </div>
      </div>
    </div>
  );
};

const Details = (props) => {
  const { data } = props;
  return (
    <div className="detail_body">
      <div className="detail_head">
        <div className="detail_head_info">
          <Title level={3} style={{ marginBottom: '0' }}>
            {`Block ${data?.block_index}`}
          </Title>
          <Tooltip placement="right" title="123">
            <InfoCircleFilled style={{ marginLeft: '0.5rem' }} />
          </Tooltip>
        </div>
        <div className="switch">
          <Radio.Group
            options={[
              { label: 'USD', value: 'USD' },
              { label: 'BTC', value: 'BTC' },
            ]}
            onChange={(e) => {
              console.log('e------', e.target.value);
            }}
            value="USD"
            optionType="button"
            buttonStyle="solid"
          />
        </div>
      </div>

      <section className="detail_section">
        This block was mined on {new Date(data?.time * 1000).toUTCString()} by <a href="/123">Machao</a>. It currently
        has 73,892 confirmations on the Bitcoin blockchain.
      </section>

      <section className="detail_section">
        The miner(s) of this block earned a total reward of {formatCurrency(data?.fee, 'BTC')}
        {formatCurrency(data?.fee, 'USD')}. The reward consisted of a base reward of
        {formatCurrency(10000, 'BTC')}
        {formatCurrency(10000, 'USD')} with an additional 0.16583560 BTC ($11,039.78) reward paid as fees of the{' '}
        {data?.n_tx} transactions which were included in the block. The Block rewards, also known as the Coinbase
        reward, were sent to this <Typography.Link>address</Typography.Link>.
      </section>

      <section className="detail_section">
        A total of {formatCurrency(10000, 'BTC')}
        {formatCurrency(10000, 'USD')} were sent in the block with the average transaction being 0.33609295 BTC
        ($22,373.92). Learn more about
        <a href="/123"> how blocks work</a>.
      </section>

      <div className="detail_list">
        <BlockITem title="Hash" value={data.hash} action="copy" />
        <BlockITem title="Confirmations" value={123123} />
        <BlockITem title="Timestamp" value={new Date(data?.time * 1000).toUTCString()} />
        <BlockITem title="Height" value={data.time} />
        <BlockITem title="Miner" value="Machao" action="link" link="/demo" />
        <BlockITem title="Number of Transactions" value={data.n_tx} />
        <BlockITem title="Merkle root" value={data.mrkl_root} />
        <BlockITem title="Version" value={data.ver} />
        <BlockITem title="Bits" value={data.bits} />
        <BlockITem title="Weight" value={data.weight} />
        <BlockITem title="Size" value={data.size} />
        <BlockITem title="Nonce" value={data.nonce} />
        <BlockITem title="Fee Reward" value={(formatCurrency(data?.fee), 'USD')} />
      </div>
    </div>
  );
};

Details.defaultProps = {
  data: {},
};

Details.propTypes = {
  data: PropTypes.object,
};

export default Details;
